<template>
  <el-header class="sys-header" style="background: #545c64;">
    <h1 class="header-title">XX学生管理系统</h1>
    <el-dropdown @command="handleCommand" class="header-dropdown">
      <span class="el-dropdown-link" style="color: #fff;">
        {{$store.state.user.username}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><router-link to="/center">个人资料</router-link></el-dropdown-item>
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item command="quit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>

<script>
import {mapActions} from 'vuex';

export default {
  name: 'SysHeader',
  methods: {
    // ...mapActions(['user/removeToken']),
    ...mapActions({
      removeToken: 'user/removeToken'
    }),
    handleCommand(command) { // 点击下拉菜单选项时触发，参数为 下拉选项的 command 属性值，通过该值判断点击了哪一个下拉项
      switch(command) {
        case 'quit':
          this.quitSys();
          break;
      }
    },
    quitSys() {
      // this['user/removeToken']();
      this.removeToken();
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.sys-header {
  line-height: 60px;
}
.header-title {
  float: left;
  height: 60px;
  color: #fff;
}
.header-dropdown {
  float: right;

  .el-dropdown-link {
    cursor: default;
  }
}
</style>